<template>
    <div class="param-list">
        <div v-if="params.length === 0" class="empty-state">
            <n-empty size="small" description="无参数">
                <template #extra>
                    <n-button size="small" @click="addParam">
                        添加参数
                    </n-button>
                </template>
            </n-empty>
        </div>

        <div v-else class="param-items">
            <div v-for="(param, index) in params" :key="index" class="param-item">
                <div class="param-controls">
                    <n-input
                        v-model:value="param.key"
                        size="small"
                        placeholder="参数名"
                        @update:value="emitUpdate"
                    />

                    <n-select
                        v-if="showType"
                        v-model:value="param.type"
                        size="small"
                        :options="typeOptions"
                        style="width: 80px"
                        @update:value="emitUpdate"
                    />
                    <n-select class="!w-[200px]"
                        v-model:value="param.value"
                        :options="valueOptions"
                        filterable clearable
                        tag
                        @update:value="emitUpdate"
                        placeholder="参数值,支持${输出字段}"
                        size="small"
                    />

                    <n-button
                        quaternary
                        circle
                        size="small"
                        @click="deleteParam(index)"
                    >
                        <template #icon>
                            <jb-icon :local="true" :icon="Icons.DELETE"></jb-icon>
                        </template>
                    </n-button>
                </div>

                <div v-if="showDescription" class="param-description">
                    <n-input
                        v-model:value="param.description"
                        size="small"
                        placeholder="参数描述"
                        @update:value="emitUpdate"
                    />
                </div>
            </div>

            <div class="param-add">
                <n-button size="small" dashed @click="addParam">
                    <template #icon>
                        <jb-icon :local="true" :icon="Icons.ADD"></jb-icon>
                    </template>
                    添加参数
                </n-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import {defineProps, defineEmits, inject, computed} from 'vue'
import { NInput, NSelect, NButton, NIcon, NEmpty } from 'naive-ui'
import {Icons} from "@/constants/index.js";

const props = defineProps({
    params: {
        type: Array,
        default: () => []
    },
    showType: {
        type: Boolean,
        default: false
    },
    showDescription: {
        type: Boolean,
        default: false
    }
})


const baseNode = inject("baseNode")

const valueOptions = computed(() => {
    return baseNode.value ? baseNode.value.prevOutputFieldOptions.map(item => ({label:`\${${item.label}}`, value:`\${${item.value}}`})) : [];
});

const emit = defineEmits(['update:params', 'add', 'delete'])

const typeOptions = [
    { label: '字符串', value: 'string' },
    { label: '数字', value: 'number' },
    { label: '布尔值', value: 'boolean' },
    { label: '数组', value: 'array' },
    { label: '对象', value: 'object' }
]

function addParam() {
    const newParam = {
        key: '',
        value: null,
        type: 'string',
        description: ''
    }

    emit('add', newParam)
}

function deleteParam(index) {
    emit('delete', index)
}

function emitUpdate() {
    emit('update:params', props.params)
}
</script>

<style scoped>
.param-list {
    width: 100%;
}

.empty-state {
    padding: 16px 0;
}

.param-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.param-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.param-controls {
    display: flex;
    gap: 4px;
    align-items: center;
}

.param-controls .n-input {
    flex: 1;
}

.param-description {
    padding-left: 4px;
}

.param-add {
    margin-top: 8px;
}
</style>